<!DOCTYPE html>
<html layout:decorator="components/layout" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
>
<head>
  <title>监控指令列表</title>
</head>
<body>
<div
  layout:fragment="content"
  id="app" v-cloak
>
  <!--引入边框角-->
  <div class="container">
    <div class="myHeader">
      <div class="myHeader-title">
        监控指令列表
      </div>

    </div>
    <el-form label-width="80px">
      <el-row :gutter="5">
        <el-col :span="3">
          <el-form-item label-width="0px">
            <el-button
              type="primary"
              size="mini"
              @click="_forward('/command-manage/add/admin_commandmonitor_add')"
              v-realm="'regulatory-directive:ins-monitor:edit'"
            >新增指令
            </el-button>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item label-width="0px">
            <el-button type="primary" size="mini" icon="el-icon-search" @click="toggle">高级搜索</el-button>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="指令类型:">
            <el-select v-model="form.operationType" @change="searchPage" placeholder="请选择" size="mini" clearable>
              <el-option v-for="(val,key) in operationTypes" :label="val" :key="key" :value="key">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="指令规则:">
            <el-select v-model="form.subtype" @change="searchPage" placeholder="请选择" size="mini" clearable>
              <el-option v-for="(val,key) in subtypes" :label="val" :key="key" :value="key">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="所在机房:">
            <el-select v-model="form.houseId" @change="searchPage" placeholder="请选择" size="mini" clearable>
              <el-option v-for="house in houses" :label="house.houseName" :key="house.id" :value="house.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <el-row>
      <el-form label-width="100px" class="container-search" v-show="formShow">
        <el-row :gutter="10">
          <el-col :span="9">
            <el-form-item label="指令ID:">
              <el-input
                v-model="form.id"
                clearable
                show-word-limit
                maxlength="64"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label-width="0">
              <rx-search-action
                v-model="form.idAction"
              ></rx-search-action>
            </el-form-item>
          </el-col>

          <el-col :span="9">
            <el-form-item label="经营者ID:">
              <el-input
                v-model="form.idcId"
                clearable
                show-word-limit
                maxlength="128"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label-width="0">
              <rx-search-action
                v-model="form.idcIdAction"
              ></rx-search-action>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="指令规则:">
              <el-input
                v-model="form.valueStart"
                clearable
                show-word-limit
                maxlength="128"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="生成时间:">
              <el-date-picker
                v-model="form.timeArray"
                @change="timeArrayChange"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
          </el-col>

        </el-row>

        <div style="text-align:center; margin-bottom:20px">
          <el-button type="primary" size="medium" @click="searchPage">查 找</el-button>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <el-button type="primary" size="medium" @click="resetPage">重 置</el-button>
        </div>
      </el-form>
    </el-row>


    <my-table
      :data="page.records"
      :columns="columns"
      @handle-selection-change="selection"
    >
      <template #operating="row">
        <span>
          <el-button
            type="primary"
            size="mini"
            @click.stop.prevent="showWindow(row.row)"
          >查看指令
        </el-button>
        </span>
        <span>
          <el-button
            v-show="updateShow(row.row)"
            type="primary"
            size="mini"
            @click.stop.prevent="updateForward(row.row)"
          >修改指令
        </el-button>
        </span>
        <span>
          <el-button
            v-show="row.row.insSource == 2"
            type="danger"
            size="mini"
            @click.stop.prevent="deleteRow(row.row)"
          >删除指令
        </el-button>
        </span>
      </template>
      <template #total="row">
        <p>访问{{row.row.total}}条</p>
        <p>上报{{row.row.uploadTotal}}条</p>
      </template>
    </my-table>
    <div class="pagination">
      <el-pagination
        background
        @size-change="changeSize"
        @current-change="goto"
        :current-page="page.current"
        :page-sizes="[10, 20, 30]"
        :page-size="page.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
      >
      </el-pagination>
      <div class="pagination-tool">
        <el-button
          type="primary"
          size="mini"
          @click="showFileSelector"
        >导入
        </el-button>
        <el-button
          type="danger"
          size="mini"
          @click="deleteSelected"
        >删除
        </el-button>
      </div>
    </div>
    <el-dialog :title="title" :visible.sync="dialogTableVisible">
      <el-table :data="insMonitorRules" border
                style="width: 100%">
        <el-table-column property="subtype" label="规则类型" width="150" :formatter="subTypeFormat">
        </el-table-column>
        <el-table-column property="valueStart" label="指令规则开始" width="200">
        </el-table-column>
        <el-table-column property="valueEnd" label="指令规则结束" width="200">
        </el-table-column>
        <el-table-column
          property="keywordRange"
          label="关键字匹配范围"
          width="200"
        >
        </el-table-column>
      </el-table>
    </el-dialog>
    <import-excel
      :file-selector-show="fileSelectorShow"
      @import-file="importFile"
      @reset-file="resetFile"
      @download-template="downloadTemplate"
    ></import-excel>


  </div>
</div>
<div layout:fragment="js">
  <script src="/static/js/module/command-manage/api/insMonitorApi.js"></script>
  <script src="/static/js/module/basic-data/api/baseHouseInfoApi.js"></script>
  <script src="/static/js/module/command-manage/admin_commandmonitor.js"></script>
</div>
</body>
</html>
